<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
		<style type="text/css">
			.wf-container:before, .wf-container:after {
				content: '';
				display: table;
			}
			.wf-container:after {
				clear: both;
			}
			.wf-column {
				float: left;
			}
			/* style for waterfall grid */
			.wf-container {
				margin: 0 auto;
			}
			.wf-container:before, .wf-container:after {
				content: '';
				display: table;
			}
			.wf-container:after {
				clear: both;
			}
			.wf-box {
				margin: 10px;
			}
			.wf-box img {
				display: block;
				width: 100%;
			}
			.wf-box .content {
				border: 1px solid #ccc;
				border-top-width: 0;
				padding: 5px 8px;
			}
			.wf-column {
				float: left;
			}
			@media screen and (min-width: 768px) {
				.wf-container {
					width: 750px;
				}
			}
			@media screen and (min-width: 992px) {
				.wf-container {
					width: 970px;
				}
			}
			@media screen and (min-width: 1200px) {
				.wf-container {
					width: 1170px;
				}
			}
		</style>
	</head>
	<body>
		<div class="aui-content-padded" style="margin-top:10px;text-align:center;">
			<button class="aui-btn aui-btn-primary" id="scale-up">
				放大列
			</button>
			&nbsp;
			<button class="aui-btn aui-btn-success" id="scale-down">
				缩小列
			</button>
		</div>
		<div class="wf-container">
			<div class="wf-box">
				<img src="../../image/waterfall/200_320.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/300_200.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/300_250.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/300_300.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/300_400.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/300_600.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/350_500.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/400_500.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/660_250.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/200_320.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
			<div class="wf-box">
				<img src="../../image/waterfall/350_500.png">
				<div class="content">
					<h3>点点例</h3>
					<p>
						点点例是基于APICloud平台开发集工具及社交类的移动应用！
					</p>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript" src="../../script/waterfall/responsive_waterfall.js"></script>
	<script type="text/javascript">
		// 初始化
		var waterfall = new Waterfall({
			containerSelector : '.wf-container',
			boxSelector : '.wf-box',
			minBoxWidth : 120
		});
		// #############################
		// 生成随机数
		function getRandomNumber(begin, end) {
			return Math.floor(Math.random() * (end - begin)) + begin;
		}

		// 判断滚动的距离和最后的盒子的距离，是否等于一半
		function checkSlide(elem) {
			if (elem) {
				var screenHeight = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight);
				var elemHeight = elem.offsetTop + elem.offsetHeight / 2;
				return elemHeight < screenHeight;
			}
		}

		// 添加新的盒子
		function newNode() {
			var size = ['200_320', '300_200', '300_250', '300_300', '300_400', '300_600', '350_500', '400_500', '660_250'];
			var i = 0;
			var box = $('<div class="wf-box"><img src="../../image/waterfall/' + size[getRandomNumber(0, 9)] + '.png"><div class="content"><h3>点点例</h3><p>点点例是基于APICloud平台开发集工具及社交类的移动应用！</p></div></div>');
			return box[0];
		}

		// 监听滚动条
		window.onscroll = function() {
			var i = waterfall.getHighestIndex();
			if (i > -1) {
				// 获取最后的盒子
				var lastBox = Array.prototype.slice.call(waterfall.columns[i].children, -1)[0];
				if (checkSlide(lastBox)) {
					var count = 9;
					while (count--) {
						waterfall.addBox(newNode());
					}
				}
			}
		};
		Zepto(function($) {
			// 缩小
			$("#scale-up").on("click", function() {
				waterfall.minBoxWidth += 20;
				// 重新编译加载
				waterfall.compose(true);
			});
			// 放大
			$("#scale-down").on("click", function() {
				waterfall.minBoxWidth -= 20;
				// 重新编译加载
				waterfall.compose(true);
			});
		});
	</script>
</html>